<template>
    <div class="goods" v-if="product && staticProduct">
        <div class="goods-box top">
            <van-sticky :offset-top="0">
                <van-nav-bar
                    color="#bbb"
                    class="bbottom"
                    :title="staticProduct.short_name"
                    stick
                >
                    <div slot="left" @click="$router.back()"><van-icon name="arrow-left" class="lv2" size="6vw"/></div>
                    <div slot="right" @click="$router.push('/home')"><van-icon name="wap-home-o" class="lv2" size="6vw"/></div>
                </van-nav-bar>
            </van-sticky>

            <div class="img">
                <img :src="product.size[index].img" alt="">
            </div>
            <div class="goods-price-msg course-wrap">
                <div class="price">
                    <span class="price-jp">{{product.size[index].jumei_price | setMoneySign}}<van-tag round color="#fe4070">包邮</van-tag></span>
                    <span class="price-del">{{product.group_single_price}}</span>
                </div>
                <div class="tuan_number">{{product.buyer_number_text}}</div>
            </div>
            <!--倒计时-->
            <div class="end-time _style-fs12">还剩 <van-count-down :time="time" /></div>
            <div class="goods-msg course-wrap van-multi-ellipsis--l2 bbottom">{{staticProduct.name}}</div> <!--商品文字信息和价格-->
            <div class="postage-wrap">
                <van-row gutter="20" class="bbottom" style="padding: 10px 0">
                    <van-col class="_style-fs12 " span="6">运费</van-col>
                    <van-col class="_style-fs12" span="16" style="color: #303133">
                        <span>{{product.freight.text}}</span>
                    </van-col>
                    <van-col span="1">
                        <van-icon name="arrow" :title="product.freight.href_url"/>
                    </van-col>
                </van-row>

                <van-row gutter="20"  style="padding: 10px 0">
                    <van-col class="_style-fs12 " span="6">说明</van-col>
                    <van-col class="_style-fs12 " span="16" style="color: #303133">
                        <p v-if="explain">可详细阅读以下商品说明</p>
                        <p  v-else v-for="(item, ind) in product.icon_tag" :key="ind" >
                             <span class="icon" v-if="item.name!==''"><van-icon name="passed" color="#fe4070"/></span>
                             <span class="instruction-title-text" v-text="item.name"/>
                        </p>
                    </van-col>
                    <van-col span="1">
                        <van-icon :name="explain ? 'arrow-down' : 'arrow'"  @click="explain=!explain"/>
                    </van-col>
                </van-row>
                <van-row gutter="20"  style="padding: 5px 0;" v-for="(item, ind) in product.icon_tag" :key="ind" v-show="explain">
                    <span class="inner" v-if="item.name!==''">
                        <van-col class="_style-fs12 " span="6"/>
                        <van-col class="_style-fs12 words" span="16" style="color: #303133">
                            <div class="instruction-title-text lv2"><van-icon class="icon" name="passed" color="#fe4070"/>{{item.name}}</div>
                           <div class="introduction-list-content lv3" v-text="item.text"/>
                        </van-col>
                        <van-col span="1" v-if="item.url_tag!==''">
                            <a :href="item.url_tag"><van-icon class="arrow-icon-right" name="arrow"/></a>
                        </van-col>
                    </span>
                </van-row>
            </div><!--运费等说明信息-->
        </div> <!--商品图片信息-->
        <div class="postage-wrap b10">
            <van-row gutter="20" style="padding: 10px 0">
                <van-col class="_style-fs12 " span="6">请选择</van-col>
                <van-col class="_style-fs12" span="16" style="color: #303133">
                    型号 分类
                </van-col>
                <van-col span="1">
                    <van-icon name="arrow" :title="product.freight.href_url"/>
                </van-col>
            </van-row>
        </div>
        <div class="select_sku_tier b10">
            todo:做不出product-sku
            <!--//todo:做不出product-sku-->
<!--            <van-sku-->
<!--                v-model="showProductSku"-->
<!--                :sku="product"-->
<!--                show-add-cart-btn-->
<!--                reset-stepper-on-hide-->
<!--                @buy-clicked="onBuyClicked"-->
<!--                @add-cart="onAddCartClicked"-->
<!--            />-->
        </div>
<!--        <div class="ruleWrap course-wrap">-->
<!--            <h3 class="course-title">拼团玩法 <a class="course-rule" href="/yiqituan/rules?type=">查看规则<van-icon name="arrow" /></a></h3>-->
<!--            <h3 class="course-wrap">-->
<!--                <div class="course-item  course-itemon"><span>支付 <br>开团/参团</span><van-icon name="arrow"/></div>-->
<!--                <div class="course-item "><span>邀请 <br>好友参团</span><van-icon name="arrow"/></div>-->
<!--                <div class="course-item "><span>拼团成功立即发货 <br>逾期未成团自动退款</span><van-icon name="arrow"/></div>-->
<!--            </h3>-->
<!--            <div class="friends_group" v-show="false">-->
<!--                <h4 class="course-title">以下小伙伴已发起拼团，您可直接参加</h4>-->
<!--            </div>-->
<!--        </div> &lt;!&ndash;拼团规则&ndash;&gt;-->
        <div class="wx-fuwu course-wrap" v-if="product.shop_info.logo_url">
            <div class="jm-fuwu">
                <div class="fwh-icon">
                    <img :src="product.shop_info.logo_url['320']" :alt="product.shop_info.store_title">
                </div>
                <div class="fwh-text">
                    <span class="fwh-title">{{product.shop_info.store_title}}</span>
                    <span class="fwh-words words-small"><van-tag round color="#fe4070">{{product.shop_info.is_authorization}}</van-tag></span>
                </div>
            </div>
            <div class="jm-fllow">
                <van-button round type="default" @click="handleToShop">进入店铺 <van-icon name="arrow"/></van-button>
            </div>
        </div> <!--店铺-->
<!--        <div class="choice-model course-wrap">-->
<!--            <h3 class="course-title">选择型号</h3>-->
<!--            <div class="model-list">-->
<!--                <van-button v-for="(item, ind) in product.size" @click="chosceModel(ind)"  round size="mini" color="#fe4070" :key="item.sku">{{item.size}}</van-button>-->
<!--            </div>-->
<!--        </div>&lt;!&ndash;选择需要购买的型号&ndash;&gt;-->
<!--        <div class="select-site">-->
<!--            <van-cell is-link @click="selectSite">-->
<!--                &lt;!&ndash; 使用 title 插槽来自定义标题 &ndash;&gt;-->
<!--                <template slot="title">-->
<!--                    <div class="custom-title"><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></div>-->
<!--                </template>-->
<!--            </van-cell>-->
<!--        </div> &lt;!&ndash;配送位置&ndash;&gt;-->
<!--        <van-popup-->
<!--            v-model="selectSiteShow"-->
<!--            get-container="#app"-->
<!--            round-->
<!--            position="bottom"-->
<!--            closeable-->
<!--            :style="{ height: '70%' }"-->
<!--            class="select-site-model"-->
<!--        >-->
<!--            <div class="site_map">-->
<!--                <h3 class="course-title">配送至</h3>-->
<!--                <ul class="site_map_list">-->
<!--                    <li class=""><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></li>-->
<!--                    <li><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></li>-->
<!--                </ul>-->
<!--            </div>-->

<!--        </van-popup> &lt;!&ndash;选择配送位置弹出&ndash;&gt;-->
<!--        <div class="buyComment" >-->
<!--           <comment-list :verify_code="product.verify_code" :product_id="product.product_id"/> &lt;!&ndash;评论&ndash;&gt;-->
<!--        </div>-->
        <div class="tuwen">
            <tuwen-list :verify_code="staticProduct.verify_code" :product_id="staticProduct.product_id" :html="staticProduct.description_info"/>
        </div>
<!--        <div class="detailPop">店铺名信息</div>-->
<!--        <div class="tlistWrap">-->
<!--            <recommend-list></recommend-list>-->
<!--        </div>-->
        <van-divider class="foo" />
        <section class="btnWrap">
            <van-goods-action>
                <van-goods-action-icon icon="shop-o"  @click="handleToShop" text="店铺"  />
                <van-goods-action-icon icon="cart-o" :info="getAmount" to="/shoppingCart" text="购物车"  />
                <van-goods-action-button text="加入购物车" style="color:#fe4070" color="#ffd8e5" @click="onAddCartClicked" />
                <van-goods-action-button text="立即购买"  color="#fe4070" @click="onBuyClicked" />
            </van-goods-action>
        </section>
    </div>
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
    //todo:lingshi
// import commentList from './components/comment-list'
// import recommendList from './components/recommend-list'
import tuwenList from './components/tuwen-list'
export default {
    name: "index",
    // beforeRouteEnter (to, from, next) {
    //     store.commit('hide')
    //     next()
    // },
    // beforeRouteLeave (to, from, next) {
    //     store.commit('show')
    //     next()
    // },
    data() {
        return {
            product: null, // 用户异步请求的真实数据
            staticProduct: null, //静态的商品数据
            selectSiteShow: false, // 配送地址选择弹出框状态
            time: 0, // 团结束事件
            index: 0, // 用户选中的size
            commentList: null, // 评论数据
            remain_time: 0, // 倒计时时间
            explain:false, // 说明是否显示
            showProductSku: true, // 显示商品规格
        }
    },
    methods: {
        ...mapMutations('cart', ['addAmount']),
        getList (url, params) { // 根据传参异步获取数据
            this.axios({
                method: 'get',
                url: url, // 请求路径由当前网页路径决定
                params: params // 参数由上一级网页传过来
            })
                .then(res => {
                    if (url.includes('ajaxDynamicDetail')) {
                        this.product = res.data.data.result
                        console.log(this.product,'this.product')
                        this.time = this.product.end_time * 1000 - Date.now() // 设置倒计时时间
                    } else if(url.includes('ajaxStaticDetail')){
                        this.staticProduct = res.data.data
                        console.log(this.staticProduct,'this.staticProduct')
                    }
                    // this.countDown() //todo:
                })
                .catch(err => console.log(err))
        }, // 请求当前页面商品数据
        chosceModel(index){
            this.index = index
        }, // 用户点击切换型号
        selectSite(){
            this.selectSiteShow = true
        }, // 选择配送地址
        handleBuy(arg) {
            console.log(arg)
        }, // buy-button
        onBuyClicked(){
            console.log('buy')
        }, // 立即购买
        onAddCartClicked(){
            console.log('addtocart')
            this.addAmount(1)
        }, // 加入购物车
        handleToShop(){
            console.log(2)
            this.$router.push('/shop')
        },// 跳转店铺
    },
    mounted() {
        this.$store.commit('hide') // 隐藏底部tabbar
        console.log((this.$route.query))
        if (this.$route.path.includes('yiqituan')) {  // 判断是否事一起团过来的 如果是 执行对应的
            // console.log(this.$route.path.includes('yiqituan'))
            this.getList('/api2/yiqituan/ajaxDetail', this.$route.query)
        }
        if (this.$route.path.includes('product')) {  // 判断是否事一起团过来的 如果是 执行对应的
            this.getList('/api1/product/ajaxDynamicDetail', this.$route.query)
            this.getList('/api1/product/ajaxStaticDetail', this.$route.query)
        }
        this.getList()
    },
    filters: {
        removeUrl (text) {
            if (text.includes('http')) {
                return text.replace(/http.+/g, '')
            } else {
                return text
            }
        } // 移除商品描述中的链接
    },
    //todo:lingshi
    components: {
    //     commentList,
        tuwenList,
        // recommendList
    },
    computed:{
        ...mapGetters('cart', ['getAmount'])
    },
    destroyed () {
        this.$store.commit('show') // 显示底部tabbar
    },
}
</script>

<style scoped lang="scss">
img{
    display: block;
}
.goods{
    &>div{
        margin-bottom: 3vw;
    }
}
.top{
    .end-time{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: $color-v3;
    }
}
.course-wrap{
    font-size: 4.4vw;
    padding: 3vw;
    color: $color-v3;
    background-color: #fff;
    .course-title{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .course-rule{
            font-size: 3.5vw;
            color: $color-v3;
        }
    }
    .course-wrap{
        font-size: 4.1vw;
        padding: 3vw 0;
        display: flex;
        justify-content: space-between;
        .course-item{
            display: flex;
            align-items: center;
            text-align: center;
            line-height: 5.5vw;
            .van-icon{
                font-size: 6vw;
                color: $color-v3;
            }
        }
        .course-itemon{
            color: $e-red;
            .van-icon{
                color: $e-red;
            }
        }
    }
}
.goods-box{
    background-color: #fff;
    .img{
        width: 100vw;
        img{
            width: 100%;
        }
    }
    .goods-price-msg{
        overflow: hidden;
        width: 100vw;
        box-sizing: border-box;
       display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: baseline;
        color: $color-v3;
        font-size: 4.4vw;
        background-color: #ffffff;
        .van-divider{
            width: 100%;
        }
        .price{
            &-jp{
                color: $e-red;
            }
        }
        .tuan_number{
            text-align: right;
        }
        .refund_msg{
            text-align: right;
        }

    }
    .postage-wrap{
        margin: 10px;
        overflow: hidden;
        .introduction-list-content{
            padding: 10px 0;
        }
        .inner{
            overflow: hidden;
            margin-top: 10px;
            display: block;
            border-bottom: 1px solid #e1e1e1;
        }
    }
}
.goods-msg{
    background-color: #ffffff;
    color: $color-v2;
}
.ruleWrap{
    color: $color-v2;

}
.wx-fuwu{
    &>div{
        margin-top: 3vw;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        &>div{
            margin-right: 3.2vw;
        }
    }
    .jm-fuwu{
        .fwh-icon{
            width: 15.6vw;
            height: 15.6vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .jm-fllow{
        display: flex;
        justify-content: center;
        align-items: center;
        .van-icon{
            padding: 0 20px;
        }
    }
    .words-small{
        font-size: 4vw;
    }
}
.choice-model{
    .model-list{
        display: flex;
        flex-wrap: wrap;
        padding: 3vw 0;
        .van-button{
            margin: 1vw 2vw;
        }
    }
}
.select-site{
    .label{
        display: inline-block;
        width: 15.6vw;
    }
    .address{
        font-size: 3.8vw;
    }
}
.select-site-model{
    .course-title{
        text-align: center;
        margin: 6.2vw 0 2.5vw;
        color: $color-v3;
    }
}
.buyComment{
    background-color: #ffffff;

}
.foo{
    margin: 0;
    margin-top: 50px;
}
.btnWrap{
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    width: 100%;
    display: grid;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    .go-to-cart{
        font-size: 12px;
        color: $color-v3;
        &::after{
        }
    }
    .add-to-cart{
        background-color: #ffd8e5;
        color: $e-red;
        font-size: 14px;
    }
    .buy-now{
        background-color: $e-red;
        color: #ffd8e5;
        font-size: 14px;
    }
}
</style>
